<template>
  <div class="dashboard-chart">
    <div class="dashboard-echart__content" ref="echartRef"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '' // 'Grade Rating2'
  },
  val: {
    type: Number, // 0~1的数字
    default: 0 // 0.6538
  },
  colors: {
    type: Array,
    default: () => {
      return [
        [0.25, '#FF6E76'],
        [0.5, '#FDDD60'],
        [0.75, '#58D9F9'],
        [1, '#7CFFB2']
      ]
    }
  }
})

const echartRef = ref()

watch(
  () => props.val,
  (n) => {
    draw()
  },
  {
    immediate: true
  }
)

function draw() {
  // let option = {
  //   // title: titleConfig,
  //   series: [
  //     {
  //       type: 'gauge',
  //       startAngle: 180,
  //       endAngle: 0,
  //       center: ['50%', '75%'],
  //       radius: '90%',
  //       min: 0,
  //       max: 1,
  //       splitNumber: 8,
  //       axisLine: {
  //         lineStyle: {
  //           width: 6,
  //           color: [
  //             [0.25, '#FF6E76'],
  //             [0.5, '#FDDD60'],
  //             [0.75, '#58D9F9'],
  //             [1, '#7CFFB2']
  //           ]
  //         }
  //       },
  //       pointer: {
  //         icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
  //         length: '10%',
  //         width: 14,
  //         offsetCenter: [0, '-50%'],
  //         itemStyle: {
  //           color: 'auto'
  //         }
  //       },
  //       axisTick: {
  //         //
  //         length: 12,
  //         lineStyle: {
  //           color: 'auto',
  //           width: 2
  //         }
  //       },
  //       splitLine: {
  //         // 刻度线
  //         length: 18,
  //         lineStyle: {
  //           color: 'auto',
  //           width: 2
  //         }
  //       },
  //       axisLabel: {
  //         // 环形备注
  //         color: '#464646',
  //         fontSize: 20,
  //         distance: -60,
  //         rotate: 'tangential',
  //         formatter: function (value) {
  //           // if (value === 0.875) {
  //           //   return 'Grade A'
  //           // } else if (value === 0.625) {
  //           //   return 'Grade B'
  //           // } else if (value === 0.375) {
  //           //   return 'Grade C'
  //           // } else if (value === 0.125) {
  //           //   return 'Grade D'
  //           // }
  //           return ''
  //         }
  //       },
  //       title: {
  //         offsetCenter: [0, '0%'],
  //         fontSize: 16,
  //         color: '#FFF'
  //       },
  //       detail: {
  //         fontSize: 16,
  //         offsetCenter: [0, '-35%'],
  //         valueAnimation: true,
  //         formatter: function (value) {
  //           return Math.round(value * 10000) / 100
  //         },
  //         color: 'inherit'
  //       },
  //       data: [
  //         {
  //           value: props.val,
  //           name: props.title
  //         }
  //       ]
  //     }
  //   ]
  // }

  const option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 8,
            color: props.colors
          }
        },
        title: {
          offsetCenter: [0, '0%'],
          fontSize: 16,
          color: '#FFF'
        },
        detail: {
          fontSize: 18,
          // offsetCenter: [0, '-35%'],
          valueAnimation: true,
          color: 'inherit',
          formatter: '{value}%'
        },
        data: [
          {
            value: props.val,
            name: props.title
          }
        ]
      }
    ]
  }
  const el = echartRef.value
  if (el) {
    let myChart = echarts.init(el, 'light', { renderer: 'canvas', useDirtyRect: false })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.dashboard-chart {
  width: 100%;
  height: 100%;
  ::v-deep(.dashboard-echart__content) {
    width: 100%;
    height: 100%;
    position: relative;
    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
